<template>
	<view class="content">
		<!-- 头部 -->
		<view class="header" style="padding-top: 50rpx; display: flex; top: 0;">
			<uni-nav-bar left-icon="back" left-text="返回"  right-text="保存" title="新建收货地址" color='#3b71d2' @clickLeft="back" @clickRight="preservation"></uni-nav-bar>
		</view>
		<!-- 表单 -->
		<view class="form">
			<view class="cu-form-group margin-top">
				<input placeholder="收货人姓名" name="input" :value="consignee" @input='change_name'></input>
			</view>
			<view class="cu-form-group ">
				<input placeholder="手机号码" type="number" maxlength="11" name="input" :value="mobile" @input='change_phone'></input>
			</view>
			<view class="cu-form-group address" style="display: flex;justify-content: space-between;">
				<view class="title" style="color: #555;">所在地区</view>
				
				<view class="title" style="color: #555;" @tap='open_change'>
					<text>{{maps == null ? '请选择地址':maps}}</text>
				</view>
			</view>
			<view class="cu-form-group address">
				<input placeholder="小区门牌号等详细地址" name="input" :value="address" @input='change_address'></input>
			</view>
			<view class="cu-form-group">
				<view class="title">设为默认地址</view>
<!-- 				<switch style="transform:scale(0.7)" class='red' @change="SwitchB" :class="switchB?'checked':''" :checked="switchB?true:false"></switch>
 -->			<switch  @change="switch1Change" style="transform:scale(0.7)" :checked="data.is_default==1?true:false"/>
              </view>
		</view>
		
		
		
		<view class="mask" v-show="mask_in">
			<view class="conter">
				<view class="title" @tap='canked'><text>取消</text></view>
				<!-- 省份 -->
				<view class="coner-cell" v-show="city_on" v-if="province_list.length > 0">
					<view class="list" :data-id='ctiy.region_id' @tap='citychange($event)' v-for="(ctiy,y) in province_list"  :key='y'><text>{{ctiy.region_name}}</text></view>
				</view>
				<!-- 城市 -->
				<view class="coner-cell" v-show="city_two" v-if="city_list.length > 0">
					<view class="list" :data-id='ctiy.region_id' @tap='citychange_two($event)' v-for="(ctiy,y) in city_list"  :key='y'><text>{{ctiy.region_name}}</text></view>
				</view>
				<!-- 區 -->
				<view class="coner-cell"  v-show="city_trhe" v-if="region_list.length > 0">
					<view class="list" :data-uid='ctiy.OnRegionId' :data-name='ctiy.OnRegionname' :data-id='ctiy.region_id' @tap='citychange_up($event)' v-for="(ctiy,y) in region_list"  :key='y'><text>{{ctiy.region_name}}</text></view>
				</view>
			</view>
		</view>
		
		
		
		
		
		
		<!-- 地址弹框 -->
		<!--<uni-popup ref="popup" type="bottom">
			<view class="popup_address">
				<view class="top">
					请选择地址：
					<text>{{province.region_name}}</text>
					<text>{{city.region_name}}</text>
					<text>{{region.region_name}}</text>
					<text class="preservation" @tap='preservation_address'>保存</text>
				</view>
				<view class="fot">
					
					
					
					 <scroll-view scroll-y style="height: 500rpx;">
						<view class="li" v-for="(item,index) in province_list" @tap="select_province(item)">
							{{item.region_name}}
						</view>
					</scroll-view>
					<scroll-view scroll-y style="height: 500rpx;" v-if="city_list">
						<view class="li" v-for="(items,index) in city_list" @tap="select_city(items)">
							{{items.region_name}}
						</view>
					</scroll-view>
					<scroll-view scroll-y style="height: 500rpx;">
						<view class="li" v-for="(item,index) in region_list" @tap="select_region(item)">
							{{item.region_name}}
						</view>
					</scroll-view> 
				</view>
			</view>
		</uni-popup>-->
	</view>
</template>

<script>
	import pickerAddress from '@/components/wangding-pickerAddress/wangding-pickerAddress.vue'
	import selectAddress from '@/components/yixuan-selectAddress/yixuan-selectAddress.vue'
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	import regionPicker from "@/components/region-picker/region-picker.vue"
	import uniList from "@/components/uni-list/uni-list.vue"
	import uniListItem from "@/components/uni-list-item/uni-list-item.vue"
	export default {
		components:{
		            pickerAddress
		        },
		data() {
			return {
				txt: '选择地址',
				title: 'Hello',
				pickindex:0,
				data:{},
				switchB: true,	
				province:{
					//region_id:null,
				},//省
				province_list:[],
				city:{
					//region_id:null,
				},//市
				city_list:[],
				region:{
					//region_id:null,
				},//区
				region_list:[],
				sum_address:'',
				consignee:'',//收货人
				mobile:'',//手机号
				address:'',//详细地址
				is_default:1,
				shi_id:null,
				shi_id_index:0,
				city_on:true,
				city_two:false,
				city_trhe:false,
				styi:0,
				mask_in:false,
				maps:null,
				mpast:[],
				OnRegionId:null,
				id:null,
			}
		},
		onReachBottom() {
			//console.log(1);
		},
		onLoad(e) {
			var uid=uni.getStorageSync('uid');
			this.getArea();//获取省份
			var id=e.id;
			console.log(id)
			if(id != undefined){
				console.log('1',id);
				this.id=id;
				this.getAddressInfo({Uid:uid,id:id});
			}
		},
		methods: {
			//sanyue新增
			open_change:function(){
				
				this.mask_in = true;
				this.city_on = true;
				this.city_list = [];
				this.region_list = [];
				this.province_list = [];
				this.getArea();
			},
			canked:function(){
				//console.log(this.styi)
				if(this.styi == 0){
					this.mask_in = false;
					//this.city_on = false;
					this.city_trhe = false;
					this.city_two = false;
					this.city_list = [];
					this.region_list = [];
					this.province_list = [];
				}else if(this.styi == 1){
					this.styi = 0;
					this.city_on = true;
					this.city_two = false;
				}else{
					//console.log(11)
					this.city_on = false;
					this.city_trhe = false;
					this.city_two = true;
					this.styi = 1;
				}
			},
			citychange:function(e){
				this.styi = 1;
				this.select_province(e.currentTarget.dataset.id);
				this.city_on = false;
				this.city_two = true;
			},
			citychange_two:function(e){
				//console.log(e.currentTarget.dataset.id)
				this.select_city(e.currentTarget.dataset.id);
				this.city_two = false;
				this.city_trhe = true;
				this.styi = 2;
			},
			citychange_up:function(e){
				this.styi = 0;
				this.city_trhe = false;
				this.city_two = false;
				this.mask_in = false;
				this.maps = e.currentTarget.dataset.name;
				this.OnRegionId = e.currentTarget.dataset.uid;
				//console.log(this.OnRegionId)
			},
			
			
			
			//获取编辑的信息
			getAddressInfo(data){
				this.infoprop('/Address/AddressInfo', 'POST', data, (res) =>{
				  this.data=res.data.data;
				  this.consignee=res.data.data.consignee;
				  this.mobile=res.data.data.mobile;
				  this.address=res.data.data.address;
				  this.is_default=res.data.data.is_default;
				  this.sum_address=res.data.data.province_name+res.data.data.city_name+res.data.data.district_name;
				  this.province.region_name=res.data.data.province.region_name;
				  // this.province.region_id=res.data.data.province;
				  // this.city.region_id=res.data.data.city;
				  // this.region.region_id=res.data.data.district;
				  this.maps=res.data.data.province_name+'-'+res.data.data.city_name+'-'+res.data.data.district_name;
				  this.OnRegionId=res.data.data.province+'-'+res.data.data.city+'-'+res.data.data.district;
				 // console.log(res);
				});
			},
			
			
			
			//获取省
			getArea(){
				var uid=uni.getStorageSync('uid');
				this.infoprop('/Address/Area', 'POST', {Uid:uid,Pid:0,type:0}, (res) =>{
					this.province_list=res.data.data;
					//console.log(this.province_list);
				})
			},
			//获取市
			select_province(data){
				//console.log(data)
				var uid=uni.getStorageSync('uid');
				this.province=data;
				this.infoprop('/Address/Area', 'POST', {Uid:uid,Pid:data,type:1}, (res) =>{
					this.city_list=res.data.data;
					//console.log(this.city_list);
				});
			},
			//获取区
			select_city(data){
				var uid=uni.getStorageSync('uid');
				this.infoprop('/Address/Area', 'POST', {Uid:uid,Pid:data,type:2}, (res) =>{
					this.city=data;
					this.region_list=res.data.data;
					//console.log(this.region_list);
				});
			},
			//获取区
			select_region(data){
				this.region=data;
			},
			//确定的地址
			preservation_address(){
				this.sum_address=this.province.region_name+this.city.region_name+this.region.region_name;
			    this.$refs.popup.close();
			},
			//默认地址
			switch1Change(e){
				var i=e.detail.value;
				if(i){
					this.is_default=1
					//console.log(this.is_default);
				}else{
					this.is_default=0;
					//console.log(this.is_default);
				}
			},
			//名字
			change_name(e){
				this.consignee=e.detail.value;
				//console.log(this.consignee);
			},
			//电话
			change_phone(e){
				this.mobile=e.detail.value;
				//console.log(this.mobile);
			},
			//详细地址
			change_address(e){
				this.address=e.detail.value;
				//console.log(this.address);
			},
			//保存新建地址
			preservation(){
				if(this.address.length<=0||this.consignee.length<=0||this.mobile.length<=0||this.OnRegionId == null){
					return uni.showToast({
						icon:'none',
						title:'填写完整信息'
					})
				};
				
				var uid=uni.getStorageSync('uid');
				var _OnRegionId = this.OnRegionId.split('-');
				var data={
					Uid:uid,
					id:this.id,
					consignee:this.consignee,
					mobile:this.mobile,
					province:_OnRegionId[0],
					city:_OnRegionId[1],
					district:_OnRegionId[2],
					address:this.address,
					is_default:this.is_default
				}
				
				//console.log(data)
				this.infoprop('/Address/AddressEdit', 'POST', data, (res) =>{
					if(res.data.status==1){
						uni.showToast({
							title:res.data.msg,
							icon:'none',
						});
						setTimeout(this.back(),2000);
						
					}else{
						uni.showToast({
							title:res.data.msg,
								icon:'none',
						});
					}
				});
			},
			// 返回上一级
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			   open(){
			         this.$refs.popup.open()
			      }

		},
		components: {
			uniNavBar,
			regionPicker,
			uniList,
			uniListItem,
			selectAddress
		}
	}
</script>

<style lang="scss" scoped>
	.content {	
		//mask
		.mask{
			position: fixed;
			height: 100%;width: 100%;
			background: rgba(0,0,0,.5);z-index: 999;
			top: 0;
			left: 0;
			display: flex;
			flex-direction: column;justify-content: flex-end;
			.conter{
				background: #FFFFFF;border-radius: 13rpx 13rpx 0 0;
				font-size:30rpx;
				.title{
					display: flex;font-size: 32rpx;
					border-bottom: 1px solid #ececec;padding:20rpx 28rpx;
				}
				.coner-cell{
					max-height:600rpx;overflow-y: scroll;
					padding:20rpx 28rpx;
					.list{
						text-align: center;color: #666666;
						padding: 13rpx 0;
					}
				}
			}
		}
		
		
		
		
		
		
		.address {
			border-top: 1upx solid #eee;
		}
		//地址弹框
		.popup_address{
		  width: 100%;
		  height: 600rpx;
		  background:rgba(255,255,255,1);
		  border-radius:20px 20px 0px 0px;
		  .top{
			  display: flex;
			  justify-content: space-between;
			  font-size: 30rpx;
			  padding: 40rpx 20rpx;
			  border-bottom: 1px solid #EEEEEE;
			  text{
				  color: #9e9e9e;
			  }
			  .preservation{
				  color: #333333;
				  margin-left: 100rpx;
				  
			  }
		  }
		  .fot{
			  display: flex;
			  justify-content: space-around;
			  .li{
				  font-size: 30rpx;
				  padding-top: 20rpx;
				  padding-left: 40rpx;
			  }
			  .active{
				  color: #007AFF;
			  }
		  }
		}

		//表单
		.cu-form-group {
			background-color: #ffffff;
			padding: 1upx 30upx;
			display: flex;
			align-items: center;
			min-height: 100upx;
			justify-content: space-between;
		}

		.cu-form-group+.cu-form-group {
			border-top: 1upx solid #eee;
		}

		.cu-form-group .title {
			text-align: justify;
			padding-right: 30upx;
			font-size: 30upx;
			position: relative;
			height: 60upx;
			line-height: 60upx;
		}

		.cu-form-group input {
			flex: 1;
			font-size: 30upx;
			color: #555;
			padding-right: 20upx;
		}

		.cu-form-group>text[class*="cuIcon-"] {
			font-size: 36upx;
			padding: 0;
			box-sizing: border-box;
		}

		.cu-form-group textarea {
			margin: 32upx 0 30upx;
			height: 4.6em;
			width: 100%;
			line-height: 1.2em;
			flex: 1;
			font-size: 28upx;
			padding: 0;
		}

		.cu-form-group.align-start .title {
			height: 1em;
			margin-top: 32upx;
			line-height: 1em;
		}

		.cu-form-group picker {
			flex: 1;
			padding-right: 40upx;
			overflow: hidden;
			position: relative;
		}

		.cu-form-group picker .picker {
			line-height: 100upx;
			font-size: 28upx;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			width: 100%;
			text-align: right;
		}

		.cu-form-group picker::after {
			font-family: cuIcon;
			display: block;
			//content: "\e6a3";
			position: absolute;
			font-size: 34upx;
			color: #8799a3;
			line-height: 100upx;
			width: 60upx;
			text-align: center;
			top: 0;
			bottom: 0;
			right: -20upx;
			margin: auto;
		}

		.cu-form-group textarea[disabled],
		.cu-form-group textarea[disabled] .placeholder {
			color: transparent;
		}
	}
</style>
